<template>
    <div>
        <div class="top-nav">
            <ul class="table-nav">
                <li v-for="(v, i) in navs" @click="changeParam(i)" :class="{ active: activeNav == i }">{{ v.label }}({{
                    v.data.length }})</li>
            </ul>
            <ul class="table-btns">
                <el-dropdown :hide-on-click="false">
                    <li><svg-icon icon-class="columnSet" />列设置</li>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item v-for="v in filterColumns" class="table-filter-item">
                                <el-checkbox v-model="v.show" :label="v.title" /></el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
                <li @click="prop.tableHandle('export', navs[activeNav].data, navs[activeNav].label)">
                    <svg-icon icon-class="export" />导出
                </li>
                <li @click="prop.tableHandle('toggle')">
                    <svg-icon icon-class="toggle" :class="{ reversal: prop.tableShrink }" />
                    {{ prop.tableShrink ? '展开' : '收起' }}
                </li>
            </ul>
        </div>
        <virtualTable :columns="showColumns" :data="navs[activeNav].data" ref="v2Table" class="v2-table-dom"
            :click="prop.rowClick" v-if="prop.realtimeTableShow" activeKey='deviceNo'>
            <template #rowItem="{ column, rowData, rowIndex }">
                <span v-if="column.key === 'index'">{{ rowIndex + 1 }}</span>
                <span v-else-if="column.key === 'objIcon'">
                    <img :src="myRequire('equipment/' + rowData[column.key] + '.png')" style="width: 29px;" />
                </span>
                <span v-else>{{ rowData[column.key] }}</span>
            </template>
        </virtualTable>
    </div>
</template>
<script setup lang="jsx">
import virtualTable from '@/components/virtualTable/index.vue'
const columns = ref([
    { key: "index", title: "序号", width: 64, show: true },
    { key: "objIcon", title: "图标", width: 80, show: true },
    { key: "numberPlate", title: "设备名称", width: 170, show: true },
    { key: "companyName", title: "所属公司", width: 350, show: true, filter: true },
    { key: "gpsDateTime", title: "最后定位时间", width: 150, show: true, filter: true, sortable: true },
    { key: "spd", title: "速度(km/h)", width: 100, show: true, filter: true },
    { key: "dayKMeter", title: "今日里程(km)", width: 120, show: true, filter: true, sortable: true },
    { key: "kilometer", title: "总里程(km)", width: 120, show: true, filter: true, sortable: true },
    { key: "satelliteCount", title: "卫星数", width: 80, show: true, filter: true, sortable: true },
    { key: "location", title: "定位位置", width: null, show: true },
]);
const showColumns = computed(() => {
    return columns.value.filter(v => v.show)
})
const filterColumns = computed(() => {
    return columns.value.filter(v => v.filter)
})
function myRequire(str) {
    return new URL(`../../../assets/img/${str}`, import.meta.url).href
}
const prop = defineProps({
    baseData: { type: Object },
    alarmList: { type: Array },
    checkedData: { type: Array },
    tableHandle: { type: Function },
    rowClick: { type: Function },
    tableShrink: { type: Boolean },
    realtimeTableShow: { type: Boolean },
});
watch(() => prop.tableShrink, (val) => {
}, { immediate: true })
const activeNav = ref(0);
const navs = computed(() => {
    let list = [
        { label: '选中', data: prop.checkedData }
    ];
    for (let key in prop.baseData) {
        list.push({ label: GlobalSetting.textTransfer[key], data: prop.baseData[key] })
    }
    list.push({ label: '报警设备', data: prop.alarmList })
    return list
})
const v2Table = ref(null);
function changeParam(param) {
    activeNav.value = param;
    v2Table.value?.vtScrollToTop();
}
</script>
<style lang='scss' scoped>
$nav-height: 34px;

.top-nav {
    height: $nav-height;
    display: inline-flex;
    font-size: 14px;
    width: 100%;
    min-width: 1700px;

    position: relative;
    z-index: 10;

    ul {
        display: inline-flex;

        li {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            height: 100%;
        }
    }

    .table-nav {
        min-width: 860px;

        li {
            color: #6B7A99;
            padding: 0 24px;

            &.active {
                color: #3388FF;
                border-bottom: 2px solid #3388FF;
                height: $nav-height + 2px;
            }
        }
    }

    .table-btns {
        margin-left: auto;
        color: #223355;
        min-width: 230px;

        li {
            padding: 0 8px;
            margin-right: 8px;

            .svg-icon {
                font-size: 16px;
                margin-right: 4px;
            }
        }
    }

}

.v2-table-dom {
    height: calc(100% - 34px) !important;
    width: 100%;
    min-width: 1700px !important;
}

.reversal {
    transform: rotate(180deg);
}
</style>